<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>会员登录</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="./css/style.css">
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!-- 引入自定义css文件 style.css -->
<link rel="stylesheet" href="css/style.css" type="text/css" />

<style>
body {
	margin-top: 20px;
	margin: 0 auto;
}

.carousel-inner .item img {
	width: 100%;
	height: 300px;
}

#currentUser{
	display: none;
}
		
</style>
<script type="text/javascript">
	function addCart() {
		//获得购买的商品的数量
		var buyNum=$("#buyNum").val();
		location.href="${pageContext.request.contextPath }/product?method=addProductToCart&pid=${product.pid}&buyNum="+buyNum;
	}
</script>
</head>

<body>
	<!-- 引入header.jsp -->
	<div id="header"></div>

	<div class="container">
		<div class="row">
			<div
				style="border: 1px solid #e4e4e4; width: 930px; margin-bottom: 10px; margin: 0 auto; padding: 10px; margin-bottom: 10px;">
				<a href="./index.htm">首页&nbsp;&nbsp;&gt;</a> <a href="./蔬菜分类.htm">蔬菜&nbsp;&nbsp;&gt;</a>
				<a>无公害蔬菜</a>
			</div>

			<div style="margin: 0 auto; width: 950px;">
				<div class="col-md-6">
					<img id="tp" style="opacity: 1; width: 400px; height: 350px;" title=""
						class="medium"
						src="">
				</div>

				<div class="col-md-6">
					
					<span id="currentUser">2</span>
				
					<div>
						<strong id="gname">aaaaa</strong>
					</div>
					<div
						style="border-bottom: 1px dotted #dddddd; width: 350px; margin: 10px 0 10px 0;">
						<div>编号：<span id="gid"></span></div>
					</div>

					<div style="margin: 10px 0 10px 0;">
						价格: <strong style="color: #ef0101;">￥<span id="gprice"></span>元/份</strong> 
					</div>

					<div style="margin: 10px 0 10px 0;">
						促销: <a target="_blank" title="限时抢购 (2014-07-30 ~ 2015-01-01)"
							style="background-color: #f07373;">限时抢购</a>
					</div>

					<div
						style="padding: 10px; border: 1px solid #e7dbb1; width: 330px; margin: 15px 0 10px 0;; background-color: #fffee6;">
						<div style="margin: 5px 0 10px 0;">白色</div>

						<div
							style="border-bottom: 1px solid #faeac7; margin-top: 20px; padding-left: 10px;">
							购买数量: <input name="number" value="1"
								maxlength="4" size="10" type="text">
						</div>

						<div style="margin: 20px 0 10px 0;; text-align: center;">
							<a href="javascript:void(0);">
								<input name="jrgwc"
								style="background: url('./images/product.gif') no-repeat scroll 0 -600px rgba(0, 0, 0, 0); height: 36px; width: 127px;"
								value="加入购物车" type="button">
							&nbsp;收藏商品 
							
							</a>
							
						</div>
					</div>
					<div>
						<a href="product_list.jsp">返回列表页面</a>
					</div>
				</div>
			</div>
			<div class="clear"></div>
			<div style="width: 950px; margin: 0 auto;">
				<div
					style="background-color: #d3d3d3; width: 930px; padding: 10px 10px; margin: 10px 0 10px 0;">
					<strong>商品介绍</strong>
				</div>

				<div>
					<p id="gsummary"></p>
					<img id="tp2" src="#">
				</div>

				<div style="background-color:#d3d3d3; width:930px; padding: 10px 10px; margin: 10px 0 10px 0;">
					<strong>商品参数</strong>
				</div>
				

				<div style="background-color: #d3d3d3; width: 900px;">
					<table class="table table-bordered">
						<tbody>
							<tr class="active">
								<th><strong>商品评论</strong></th>
							</tr>
							<tr class="warning">
								<th>暂无商品评论信息 <a>[发表商品评论]</a></th>
							</tr>
						</tbody>
					</table>
				</div>

				<div style="background-color: #d3d3d3; width: 900px;">
					<table class="table table-bordered">
						<tbody>
							<tr class="active">
								<th><strong>商品咨询</strong></th>
							</tr>
							<tr class="warning">
								<th>暂无商品咨询信息 <a>[发表商品咨询]</a></th>
							</tr>
						</tbody>
					</table>
				</div>
			</div>

		</div>
	</div>


	<!-- 引入footer.jsp -->
	<div id="footer"></div>

</body>

</html>


<script src="https://www.layuicdn.com/layui/layui.all.js"></script>

<script type="text/javascript">

//声明一个js参数，用来取得地址栏
function getUrlSearch(name) {
  // 未传参，返回空
  if (!name) return null;
  // 查询参数：先通过search取值，如果取不到就通过hash来取
  var after = window.location.search;
  after = after.substr(1) || window.location.hash.split('?')[1];
  // 地址栏URL没有查询参数，返回空
  if (!after) return null;
  // 如果查询参数中没有"name"，返回空
  if (after.indexOf(name) === -1) return null;
 
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
  // 当地址栏参数存在中文时，需要解码，不然会乱码
  var r = decodeURI(after).match(reg);
  // 如果url中"name"没有值，返回空
  if (!r) return null;
  return r[2];
}

</script>


<script type="text/javascript">
//加载头部
$.post('header.jsp',{},function(data){
	$("#header").html(data);
},'text');


//加载尾部
$.post('footer.jsp',{},function(data){
	$("#footer").html(data);
},'text');

</script>


<script>
layui.use(['form','jquery','laypage'], function(){
	var $ = layui.jquery ;
	//取得地址栏的gid 
	var gid = getUrlSearch('gid');
	//发送ajax请求查询商品  /xiaomi/findGoodsCriteria
	var obj = {"gid":gid } ;
	$.post('/heima/findGoodsCriteria',obj,function(data){
		var gname = data[0].gname;
		var gprice = data[0].gprice ;
		var gsummary = data[0].gsummary;
		var tp = data[0].gphoto;
		//将数据组装到页面
		$("#gname").text(gname);
		$("#gprice").text(gprice);
		$("#gsummary").text(gsummary);
		$("#gid").text(data[0].gid);
		//修改图片的src属性
		$("#tp").attr("src",tp);
		$("#tp2").attr("src",tp);
	},'json');
	
	//加入购物车
	insertCart(gid) ; //加入购物车
	
});

//加入购物车
function insertCart(gid){
	$("input[name=jrgwc]").click(function(){
		//得到当前登录的用户
		var user = $("#currentUser").text();
		//得到文本框的数量
		var number = $("input[name=number]").val() ;
		//将数量转为整数
		number = parseInt(number);
		//得到uid ,图片，商品名称，价格等其他数据
		var uid = user;
		var gphoto = $("#tp").attr("src");
		var gname = $("#gname").text();
		var gprice = $("#gprice").text()  ;
		//单价要乘以总价
		gprice = parseInt(gprice)*number;
		var count = number;
		//拼接成json数据
		var obj = {
			"uid":uid ,
			"gid":gid ,
			"gphoto":gphoto,
			"gname":gname,
			"gprice":gprice ,
			"count":count
		};
		//发送ajax请求,将数据添加到购物车表
		$.post('/heima/insertMyCart',obj,function(data){
		    //layer是layui对象 全局 直接使用
		    console.log(obj);
		    if(data.msg=='success'){
		    	layer.alert("加入购物车成功");
		    }else if(data.msg=='fail'){
		    	layer.alert("加入购物车失败");
		    }
			
		},'json');
		
		
	});
}

</script>